<template>
	<div>
		<NavigationBar title-text="医院科室" :is-show-button="false" />
		<Message ref="message" />
		<Loading ref="loading" fullscreen />
		<div class="cover-container w-full h-280rpx absolute top-0 left-0" :style="{ height: `calc(${navigationHeight}px + 340rpx)` }">
			<image class="w-full h-full" src="/static/images/my-bg.jpg" mode="aspectFill" />
		</div>
		<div class="registered-container w-full h-screen flex-column pt-200rpx">
			<!-- <div class="w-full mb-20rpx pl-10rpx pr-10rpx">
				<u-search shape="round" v-model="searchKey" @custom="searchServe" bg-color="#fff"></u-search>
			</div> -->
			<div class="w-full flex min-h-90vh">
				<div class="flex-column w-200rpx bor-r">
					<scroll-view :scroll-top="0" scroll-y="true" class="h-90vh flex-column" enhanced="true" show-scrollbar="{{false}}">
						<div class="w-full text-center text-30rpx pl-20rpx pr-20rpx text-hex-82848a">
							<div
								:class="['bor-b', 'pt-30rpx', 'pb-30rpx', { 'text-primary': current === item.name }]"
								v-for="item in departmentList"
								:key="item.id"
								@click="tabsChange(item.name)"
							>
								{{ item.name }}
							</div>
						</div>
					</scroll-view>
				</div>
				<div class="flex-grow-1">
					<scroll-view :scroll-top="0" scroll-y="true" class="h-90vh flex-column" enhanced="true" show-scrollbar="{{false}}">
						<div class="w-full text-center text-30rpx pl-20rpx pr-20rpx">
							<div class="bor-b pt-30rpx pb-30rpx" v-for="item in classifyList" :key="item.id" @click="gotoDetail(item.classify)">{{ item.classify }}</div>
						</div>
					</scroll-view>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import Message from '@/components/message/src/message.vue';
import type { MessageMethod } from '@/components/message';
import Loading from '@/components/loading/src/loading.vue';
import type { LoadingMethod } from '@/components/loading';
import NavigationBar from '@/components/navigation-bar/src/navigation-bar.vue';
import { gotoPage } from '@/common/utils';
import { useUserStore, useSystemStore } from '@/store';
import { serveApi } from '@/service/api';

const userStore = useUserStore();

const message = ref<InstanceType<typeof Message> & MessageMethod>(null);
const loading = ref<InstanceType<typeof Loading> & LoadingMethod>(null);

const { navigationHeight } = useSystemStore();

const key = ref('department');
const departmentList = ref([]);
const classifyList = ref([]);
const current = ref('');
const searchKey = ref('');

const tabsChange = useThrottleFn(
	(index: string) => {
		current.value = index;
		getClassifyList('classify', current.value);
	},
	100,
	false,
	true
);

// 获取科室列表
const getServeList = useThrottleFn(
	async (key, searchKey = ''): Promise<void> => {
		const res = await serveApi.getDepartment({ key, searchKey });
		// console.log(res.data?.data.result);
		departmentList.value = res.data?.data.result;
		current.value = departmentList.value[0].name;
		getClassifyList('classify', current.value);
	},
	1000,
	false,
	true
);
getServeList(key.value);

// 获取分类列表
const getClassifyList = async (key:string, searchKey = '') => {
	const res = await serveApi.getDepartment({ key, searchKey });
	// console.log(res.data?.data.result);
	classifyList.value = res.data?.data.result;
};
// 搜索
const searchServe = () => {
	console.log(searchKey.value);

	if (searchKey.value) {
	}
};

const gotoDetail = useThrottleFn(
	(classify: string): void => {
		gotoPage(`/pages/doctor-depart/doctor-depart?classify=${classify}`);
	},
	1000,
	false,
	true
);


onShow(() => {

});
</script>

<style scoped lang="scss">
@import 'registered';
</style>
